<template>
	<view style="overflow: hidden; height: 100vh;">
		<view class="top-bar">
			<image src="../../../static/Logo.png" mode=""></image>
			<view>
				<text>美宝书画 © 2021</text>
			</view>
		</view>
		<view class="about">
		<view>
			<view class="btn" @click="goToContact">
				<text>联系我们</text>
				<u-icon class="icon" name="arrow-right" color="#939393" size="28"></u-icon>
			</view>
			<view class="btn" @click="goToPersonal">
				<text>个人信息</text>
				<u-icon class="icon" name="arrow-right" color="#939393" size="28"></u-icon>
			</view>
			<view class="btn" @click="goToRuler">
				<text>拍卖规则</text>
				<u-icon class="icon" name="arrow-right" color="#939393" size="28"></u-icon>
			</view>
			<view class="btn" @click="goToRegister">
				<text>注册协议</text>
				<u-icon class="icon" name="arrow-right" color="#939393" size="28"></u-icon>
			</view>
			<view class="btn" @click="goToService">
				<text>服务协议</text>
				<u-icon class="icon" name="arrow-right" color="#939393" size="28"></u-icon>
			</view>
			<view class="btn">
				<text>版本信息</text>
				<text class="message">3.0.01</text>
			</view>
			<view class="cancel-btn" @click="show = true">
				<text>退出账号</text>
			</view>
			<view>
				<u-modal v-model="show"  @confirm="confirm" :content="content" :mask-close-able="true" :show-cancel-button="true" confirm-color="#c6100E"></u-modal>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
export default {
		data() {
			return {
				show: false,
				content: '确定要退出账号吗？'
				}
			},
		methods: {
			confirm(){
				uni.redirectTo({
					url:'../../../pages/login/login/login'
				})
			},
			goToService(){
				uni.navigateTo({
					url:"./service/service"
				})
			},
			goToRegister(){
				uni.navigateTo({
					url:"./register/register"
				})
			},
			goToRuler(){
				uni.navigateTo({
					url:"./ruler/ruler"
				})
			},
			goToPersonal(){
				uni.navigateTo({
					url:"./personal/personal"
				})
			},
			goToContact(){
				uni.navigateTo({
					url:"./contact/contact"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bar {
		background-color: #fefffe;
		border-radius: 10rpx;
		margin: 5%;
		height: 300rpx;
	}
	
	.top-bar image {
		width: 22%;
		height: 160rpx;
		margin-left: 40%;
		margin-top: 20rpx;
	}
	
	.top-bar text {
		text-align: center;
		color: #939393;
		font-size: 28rpx;
		margin-left: 35%;
	}
	
	.btn {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: 5%;
		height: 100rpx;
		background-color: #fefffe;
		border-radius: 10rpx;
		line-height: 100rpx;
		position: relative;
	}
	.btn .message {
		position: absolute;
		top: -2rpx;
		right: 30rpx;
		color: #939393;
	}
	
	.btn text {
		margin-left: 20rpx;
	}
	
	.btn .icon {
		margin-right: 20rpx;
	}
	
	.cancel-btn {
		width: 90%;
		height: 88rpx;
		margin: 5%;
		background-color: #c6100e;
		text-align: center;
		line-height: 88rpx;
		color: #ffffff;
		border-radius: 50rpx;
	}
</style>
